<template>
	<view class="bg-white">
		<view class="">
			<view class="cu-form-group ml-2 hover">
				<view class="title text-c1">头像</view>
				<view class="content">
					<button class="cu-btn round" open-type="chooseAvatar" @chooseavatar="avatarUrlClick"
						style="width: auto;height: auto;padding-left: unset;padding-right: unset;background: transparent;">
						<image :src="curData.headImg" class="solids round" style="height: 100rpx;width: 100rpx;">
						</image>
					</button>
				</view>
			</view>
			<view class="cu-form-group ml-2 hover">
				<view class="title text-c1">昵称</view>
				<view class="content" :class="curData.nickName == ''?'novalue':''"
					@click="nicknameClick('nickName','昵称',10)">
					{{curData.nickName == ''?'设置昵称':curData.nickName}}
				</view>
			</view>
			<view class="cu-form-group ml-2 hover">
				<view class="title text-c1">性别</view>
				<picker @change="pickerChange($event,'sex')" :range="sexList" range-key="name">
					<view class="picker" :class="curData.sexShow == ''?'novalue':''">
						{{curData.sexShow == ""?'设置性别':curData.sexShow}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group ml-2 hover">
				<view class="title text-c1">生日</view>
				<picker mode="date" @change="pickerChange($event,'birthday')" :value="curData.birthday">
					<view class="picker" :class="curData.birthday == ''?'novalue':''">
						{{curData.birthday == ""?'设置生日':curData.birthday}}
					</view>
				</picker>
			</view>

			<view class="cu-form-group ml-2 hover">
				<view class="title text-c1">用户ID</view>
				<view class="content" :class="curData.userNo == ''?'novalue':''">
					{{curData.userNo == ""?'用户ID':curData.userNo}}
				</view>
			</view>
			<view class="cu-form-group ml-2 hover">
				<view class="title text-c1">二维码名片</view>
				<view class="content">
					<image :src="curData.erweima" style="width: 40rpx;height: 40rpx;" @click="previewImage"></image>
				</view>
			</view>
		</view>
		<gz-modal ref="gzModalRef" type="nickname"></gz-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curData: {
					headImg: "/static/logo.png",
					phone: "13200000000",
					nickName: "格子基础框架",
					sex: "NAN",
					sexShow: "男",
					birthday: "2023-10-24",
					userNo: '10000000',
					erweima: 'https://oscimg.oschina.net/oscnet/up-d8ca3b56a3f25febe763e8e40811c937bcd.jpg'
				},
				sexList: [{
						name: "男",
						value: "NAN"
					},
					{
						name: "女",
						value: 'NV'
					}
				]
			};
		},
		onLoad() {
			//若有接口,可以放开注释
			// uni.$api.userFindUserInfo().then(result => {
			// 	uni.setStorageSync("userInfo", result)
			// 	let userInfo = result
			// 	this.curData.headImg = userInfo.headImg
			// 	this.curData.phone = userInfo.phone
			// 	this.curData.nickName = userInfo.nickName
			// 	this.curData.sex = userInfo.sex
			// 	this.curData.sexShow = userInfo.sexShow
			// 	this.curData.birthday = userInfo.birthday
			// })
		},
		methods: {
			previewImage() {
				uni.previewImage({
					urls: [this.curData.erweima],
				})
			},
			pickerChange(e, type) {
				console.info(e, type)
				let value = e.detail.value
				if (type == 'sex') {
					let item = this.sexList[value]
					this.updateInfo('sex', item.value, () => {
						this.curData.sex = item.value
						this.curData.sexShow = item.name
						this.meUpdata()
					})
				} else if (type == 'birthday') {
					this.updateInfo('birthday', value, () => {
						this.curData.birthday = value
						this.meUpdata()
					})
				}
			},
			nicknameClick() {
				this.$refs.gzModalRef.open({
					type: "nickname"
				}, (nickName) => {
					this.curData.nickName = nickName
				})
			},
			inputClick(field, name, numCount) {
				uni.showModal({
					title: "输入框",
					editable: true,
					placeholderText: '请输入' + name,
					success: (res) => {
						console.info("showModal", res)
						if (res.confirm) {
							let content = res.content.trim()
							if (!content) {
								return
							}
							if (content.length > numCount) {
								uni.$common.toastErr("不能超过" + numCount + "个字")
							}
							if (field == 'email') {
								if (uni.$common.checkStr('email', content)) {
									this.updateInfo(field, content, () => {
										this.curData[field] = content
										this.meUpdata()
									})
								} else {
									uni.$common.toastErr("邮箱不正确")
								}
							} else {
								this.updateInfo(field, content, () => {
									this.curData[field] = content
									this.meUpdata()
								})
							}
						}
					}
				})
			},

			avatarUrlClick(res) {
				console.info(res)
				uni.$api.upFile({
					file: res.detail.avatarUrl,
					rootPath: "headimg"
				}).then(data => {
					this.updateInfo("headImg", data.url, () => {
						this.curData.headImg = data.url
						this.meUpdata()
					})
				})
			},
			meUpdata() {
				uni.$emit("meUpdate")
			},
			/**
			 * 更新用户某个值
			 * @param {Object} field
			 * @param {Object} value
			 * @param {Object} event
			 */
			updateInfo(field, value, event) {
				//若有接口,可以放开注释
				// uni.$api.userUpdInfo({
				// 	[field]: value
				// }).then(res => {
				// 	uni.$common.toastSuc("已保存", () => {
				// 		uni.$common.setStoFieldValue("userInfo", field, value)

				// 		if (event) {
				// 			event()
				// 		}
				// 	})
				// })
			}
		}
	}
</script>

<style>
	.cu-form-group {
		font-size: 30rpx;
		padding-left: 0 !important;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
		font-size: 35rpx;

	}

	.cu-form-group picker .picker {
		font-size: 32rpx;
	}

	.cu-form-group {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.cu-form-group .content {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.cu-form-group .content::after {
		font-family: cuIcon;
		content: "\e6a3";
		font-size: 34upx;
		color: #8799a3;
		line-height: 100upx;
		width: 60upx;
		text-align: center;
		margin-right: -20upx;
	}
</style>